
<template>
  <view class="content">
	  <view class="" style="display: flex;justify-content: center;">
	  	<p style="font-size: 36rpx;width: 2.5rem;">保定</p>
	  <u-icon name="map"></u-icon>
	  </view>

    <!-- <button type="primary" @click="getLocation">获取当前位置</button>
    <view v-if="locationData" class="location-data" style="color: white;">
      <text>纬度: {{ locationData.latitude }}</text><br />
      <text>经度: {{ locationData.longitude }}</text><br />
      <text>精度: {{ locationData.accuracy }} 米</text><br />
      <text>当前城市: {{ currentCity }}</text>
    </view> -->
    <view v-if="errorMessage" class="error-message">
      <text>{{ errorMessage }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import axios from "axios"; // 确保你已经安装了 axios

const locationData = ref(null);
const errorMessage = ref("");
const currentCity = ref(null); // 用于存储当前城市信息

const getLocation = async () => {
  try {
    // 检查是否支持地理定位功能
    if (!navigator.geolocation && uni.getSystemInfoSync().platform === "android") {
      errorMessage.value = "当前浏览器不支持地理定位";
      return;
    }

    console.log("平台支持定位功能");

    // 调用 uni.getLocation 获取位置信息
    const res = await new Promise((resolve, reject) => {
      uni.getLocation({
        type: "wgs84",
        enableHighAccuracy: true,
        timeout: 5000, // 超时时间设为5秒
        success: resolve,
        fail: reject
      });
    });

    locationData.value = {
      latitude: res.latitude,
      longitude: res.longitude,
      accuracy: res.accuracy
    };
    errorMessage.value = "";

    // 使用高德地图 API 进行逆地理编码
    const cityInfo = await getCityByLocation(res.latitude, res.longitude);
    currentCity.value = cityInfo || "未知城市";

  } catch (err) {
    let message = "";
    switch (err.errMsg) {
      case "getLocation:fail auth deny":
        message = "用户拒绝了位置请求";
        break;
      case "getLocation:fail no network":
        message = "无法获取位置，可能是网络问题";
        break;
      case "getLocation:timeout":
        message = "获取位置超时";
        break;
      default:
        message = "无法获取位置";
        break;
    }
    errorMessage.value = message;
    locationData.value = null;
  }
};

const getCityByLocation = async (latitude, longitude) => {
	console.log("经度",latitude,"维度",longitude);
  try {
    const response = await axios.get("https://restapi.amap.com/v3/geocode/regeo", {
      params: {
        key: "7a83ab5c6bb1653bc6a6203176a81978", // 替换为你的高德API Key
        location: `${longitude},${latitude}`,
        output: "json",
        extensions: "base"
      }
    });

    // 打印完整的响应信息用于调试
    console.log("API Response:", JSON.stringify(response.data, null, 2));

    // 检查状态码
    if (response.data.status !== "1") {
      // console.error("API 请求失败:", response.data.info || "未知错误");
      return "API 请求失败";
    }

    // 检查 regeocode 是否存在
    if (!response.data.regeocode) {
      console.error("API 返回的数据中缺少 regeocode 信息");
      return "无法获取城市信息";
    }

    const addressComponent = response.data.regeocode.addressComponent;

    // 提取城市信息，若 city 字段不存在则尝试使用 province 或者返回默认值
    const city = addressComponent.city || addressComponent.province || "未知城市";

    console.log("成功获取城市信息:", city);
    return city;
  } catch (error) {
    console.error("逆地理编码失败:", error.message);
    return "逆地理编码失败";
  }
};
onMounted(()=>{
	getLocation();
});
</script>

<style>
.content {
  padding: 20px;
}

button {
  margin-bottom: 20px;
}

.location-data,
.error-message {
  font-size: 16px;
  color: #333;
}

.error-message {
  color: red;
}
</style>